import React, {Component} from 'react';
import axios from 'axios';
import './css/maizuo.css';

class Cinema extends Component {
    constructor(props) {
        super(props);
        this.state = {
            cinemas: [],
            inputValue: ''
        }
        axios({
            url: 'https://m.maizuo.com/gateway?cityId=110100&ticketFlag=1&k=4281971',
            headers: {
                'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"1759065151917503798673409"}',
                'X-Host': 'mall.film-ticket.cinema.list'
            }
        }).then(res => {
            console.log(res.data.data.cinemas);
            this.setState({
                cinemas: res.data.data.cinemas
            })

        }).catch(err => {
            console.log(err);
        })
    }

    changeValue = e => {
        this.setState({
            inputValue: e.target.value
        })
    }

    queryCinemas = () => {
        const list = this.state.cinemas.filter(cinema =>
            cinema.name.includes(this.state.inputValue) || cinema.address.includes(this.state.inputValue))
        console.log(list);
        return list;
    }

    render() {
        return (<div>
            <input value={this.state.inputValue} onChange={this.changeValue}/>
            <div className="cinema-wrapper" style={{height: '600px', overflow: 'hidden'}}>
                <div className="cinema-content">
                    {this.queryCinemas().map(cinema => {
                        return <dl key={cinema.cinemaId}>
                            <dt>{cinema.name}</dt>
                            <dd>{cinema.address}</dd>
                        </dl>
                    })}
                </div>
            </div>
        </div>);
    }
}

export default Cinema;